<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片懒加载</title>
    <style>
        .card-list{
            width: 70%;
            padding-left: 222px;
            /* background-color: red; */
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-content:space-evenly;
        }
        .item{
            /* width: 100%; */
            height: 100%;
        }
        img{
            /* display: block; */
             width: 170px; 
             height: 220px;
        }
    </style>
    <!-- <link rel="stylesheet" href="index.css"/> -->
</head>

<body>
   <div class="card-list">
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=11"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=12"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=13"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=14"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=15"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=16"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=17"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=18"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=19"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=20"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=21"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=22"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=23"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=24"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=25"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=26"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=27"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=28"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=29"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=30"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=31"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=32"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=33"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=34"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=35"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=36"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=37"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=38"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=39"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=40"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=41"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt="" 
                data-src="https://picsum.photos/400/600?r=42"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=43"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=44"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=1"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=2"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=3"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=4"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=5"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=6"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=7"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=8"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=9"
            />
        </div>
        <div class="item">
            <img
                src="./default.png"
                alt=""
                data-src="https://picsum.photos/400/600?r=10"
            />
        </div>
   </div>
   
</body>
</html>
<script>
    const ob=new IntersectionObserver((entries)=>{
        console.log(entries);
        for(const entry of entries){
            if(entry.isIntersecting){//判断数组标识属性是否交叉
                // console.log('交叉了');
                const img=entry.target;
                img.src=img.dataset.src;
                ob.unobserve(img)//取消交叉监听
            }
        }
    },{
        // root:null,//判断和那个元素进行交叉，视口默认为null
        // rootMargin:0, //元素交叉范围
        threshold:0   //0-1,0表示进入了视口就触发
    })
    const imgs=document.querySelectorAll('img[data-src]');
    imgs.forEach((img)=>{
        ob.observe(img)
    })
</script>